<template>
  <div class="DataScreening">
    <el-card>
      <div class="searchBox">
        <h3><span class="tt"></span> 数据总览</h3>
      </div>
      <el-row class="cardRow" :gutter="20">
        <el-col :span="6">
          <div class="card">
            <h3>
              <span class="point"></span>
              平台金币总数
            </h3>
            <h1>
              <i class="iconfont" style="font-size: 38px">&#xeb19;</i>
              300
            </h1>
            <div class="line"></div>

            <div class="foot">2021-5-05-25</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card">
            <h3>
              <span class="point"></span>
              平台宝石总数
            </h3>
            <h1>
              <i class="iconfont">&#xe65b;</i>
              300
            </h1>
            <div class="line"></div>

            <div class="foot">2021-5-05-25</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card">
            <h3>
              <span class="point"></span>
              平台金币消耗总数
            </h3>
            <h1>
              <i class="iconfont">&#xe721;</i>
              300
            </h1>
            <div class="line"></div>

            <div class="foot">2021-5-05-25</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card">
            <h3>
              <span class="point"></span>
              平台宝石消耗总数
            </h3>
            <h1>
              <i class="iconfont">&#xe721;</i>
              300
            </h1>
            <div class="line"></div>

            <div class="foot">2021-5-05-25</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- <el-radio-group style="margin-top: 20px" v-model="active" fill="#7b94d8">
      <el-radio-button label="1">业务数据</el-radio-button>
      <el-radio-button label="2">充值概况</el-radio-button>
      <el-radio-button label="3">工会概况</el-radio-button>
    </el-radio-group> -->

    <!-- 业务数据 -->
    <el-card class="dataFirst">
      <!-- 标题 -->
      <div class="title">
        <div class="block"></div>
        <span class="text">业务数据</span>
        <el-tooltip content="提示点啥" placement="right">
          <i class="el-icon-warning" style="color: #7e84a4"></i>
        </el-tooltip>
      </div>
      <!-- 筛选 -->
      <div class="searchBox">
        <el-radio-group
          @change="reverse"
          v-model="dayType"
          size="small"
          fill="#7b94d8"
        >
          <el-radio-button label="1">今日</el-radio-button>
          <el-radio-button label="2">昨日</el-radio-button>
          <el-radio-button label="3">近7日</el-radio-button>
        </el-radio-group>

        <el-date-picker
          size="small"
          v-model="timeArr"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="timeOptions"
          value-format="yyyy-MM-dd"
          @change="focusA"
        >
        </el-date-picker>

        <div class="displayPage">
          <p class="p">一级渠道</p>
          <el-select
            v-model="channel1"
            size="small"
            slot="prepend"
            placeholder="不限"
          >
            <el-option
              v-for="(item, index) in arr1"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
        <div class="displayPage">
          <p class="p">二级渠道</p>
          <el-select
            size="small"
            v-model="channel2"
            slot="prepend"
            placeholder="不限"
          >
            <el-option
              v-for="(item, index) in arr2"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
        <div class="displayPage">
          <p class="p">用户分类</p>
          <el-select
            size="small"
            v-model="user"
            slot="prepend"
            placeholder="不限"
          >
            <el-option label="普通用户" value="1"></el-option>
            <el-option label="认证用户" value="2"></el-option>
          </el-select>
        </div>

        <el-button
          style="margin-left: 10px"
          class="btn"
          icon="el-icon-search"
          size="small"
          @click="searchDataList"
          >搜索</el-button
        >
        <el-button icon="el-icon-paperclip" @click="excel" size="small"
          >导出EXCEL</el-button
        >
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        v-loading="loading"
        style="width: 100%; margin-top: 15px"
      >
        <el-table-column width="150" prop="date" label="时间">
        </el-table-column>
        <el-table-column
          width="150"
          prop="total_registered_users"
          label="总用户数"
        >
        </el-table-column>
        <el-table-column width="150" prop="active_users" label="活跃用户数">
        </el-table-column>
        <el-table-column width="150" prop="prepaid_users" label="充值人数">
        </el-table-column>
        <el-table-column width="150" prop="recharge_amount" label="充值金额">
        </el-table-column>
        <el-table-column
          width="150"
          prop="vip_recharge_amount"
          label="Vip充值金额"
        >
        </el-table-column>
        <el-table-column
          width="150"
          prop="coins_recharge_amount"
          label="金币充值金额"
        >
        </el-table-column>

        <el-table-column
          width="150"
          prop="new_registered_user"
          label="新增注册"
        >
        </el-table-column>
        <el-table-column
          width="150"
          prop="new_next_day_users"
          label="新增次留数"
        >
        </el-table-column>
        <el-table-column
          width="150"
          prop="new_subscribers_users"
          label="新增充值人数"
        >
        </el-table-column>
        <el-table-column
          width="150"
          prop="new_recharge_amount"
          label="新增充值金额"
        >
        </el-table-column>
        <el-table-column
          width="150"
          prop="new_vip_recharge_amount"
          label="新增Vip充值金额"
        >
        </el-table-column>
        <el-table-column
          width="150"
          prop="new_coins_recharge_amount'"
          label="新增金币充值金额"
        >
        </el-table-column>
        <el-table-column width="150" prop="call_the_number" label="通话人数">
        </el-table-column>
        <el-table-column width="150" prop="call_duration" label="通话时长">
        </el-table-column>
        <el-table-column
          width="150"
          prop="number_of_active_calls"
          label="有效通话人数"
        >
        </el-table-column>
        <el-table-column
          width="150"
          prop="valid_call_duration"
          label="有效通话时长"
        >
        </el-table-column>
        <el-table-column width="150" prop="gems_earned" label="获得宝石数">
        </el-table-column>
        <el-table-column
          width="150"
          prop="number_of_withdrawal"
          label="提现人数"
        >
        </el-table-column>
        <el-table-column width="150" prop="withdrawal_amount" label="提现金额">
        </el-table-column>
        <el-table-column
          width="150"
          prop="consumption_of_gold"
          label="金币消耗数"
        >
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- <Tabel
      v-if="active == 1"
      title="用户新增数据"
      prompt="提示点啥"
      :showSummary="true"
      type="1"
    ></Tabel> -->
    <!-- <Tabel
      v-if="active == 1"
      style="margin-top: 20px"
      title="渠道新增TOP5"
      prompt="提示点啥"
      :showSummary="true"
      type="2"
    ></Tabel> -->
    <!-- <Tabel
      v-if="active == 2"
      title="充值概况"
      prompt="提示点啥"
      :showSummary="true"
      type="6"
    ></Tabel>
    <Tabel
      v-if="active == 3"
      title="工会概况TOP5"
      prompt="提示点啥"
      :showSummary="true"
      type="3"
    ></Tabel> -->
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import Tabel from "./components/TabelTemplate";
import { getDataList_api } from "@/api/DataManagement";
export default {
  components: { Tabel, Pagination },
  data() {
    return {
      active: "1",
      dayType: "2", //昨日今日近7日
      timeArr: [], //日期
      // 时间日期
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      startDate: "",
      endDate: "",
      tableData: [], //列表
      loading: false,
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
      user: "", //用户类型
      channel: "", //一级渠道值
      channel1: "", //二级渠道值
      arr1: [], //一级渠道数组
      arr2: [], //二级渠道数组
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    focusA(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startDate = this.timeArr[0];
      this.endDate = this.timeArr[1];
    },
    getList() {
      this.getDataList();
    },
    reverse() {
      this.getDataList();
    },
    searchDataList() {
      this.getDataList();
    },
    // 获取业务数据列表
    async getDataList() {
      // this.loading = true;
      let { code, data } = await getDataList_api({
        startTime: this.startDate,
        endTime: this.endDate,
        user_auth: this.user,
        utm_source: this.channel,
        market_source: this.channel1,
        page: this.page,
        pageSize: this.pageSize,
      });
      if (code == 0) {
        console.log(data, "业务数据");
        this.tableData = data.list;
        this.total = parseInt(data.total);
        this.arr1 = data.utm_source;
        this.arr2 = data.market_source;
        this.loading = false;
      }
    },
    // 导出excel
    async excel() {
      let { code, data } = await getDataList_api({
        startTime: this.startDate,
        endTime: this.endDate,
        user_auth: this.user,
        utm_source: this.channel,
        market_source: this.channel1,
        page: 1,
        pageSize: 10000,
      });
      const head = [
        "时间",
        "总用户数",
        "活跃用户数",
        "充值人数",
        "充值金额",
        "Vip充值金额",
        "金币充值金额",
        "新增注册",
        "新增次留数",
        "新增充值人数",
        "新增充值金额",
        "新增Vip充值金额",
        "新增金币充值金额",
        "通话人数",
        "通话时长",
        "有效通话人数",
        "有效通话时长",
        "获得宝石数",
        "提现人数",
        "提现金额",
        "金币消耗数",
      ];
      const fiald = [
        "date",
        "total_registered_users",
        "active_users",
        "prepaid_users",
        "recharge_amount",
        "vip_recharge_amount",
        "coins_recharge_amount",
        "new_registered_user",
        "new_next_day_users",
        "new_subscribers_users",
        "new_recharge_amount",
        "new_vip_recharge_amount",
        "new_coins_recharge_amount",
        "call_the_number",
        "call_duration",
        "number_of_active_calls",
        "valid_call_duration",
        "gems_earned",
        "number_of_withdrawal",
        "withdrawal_amount",
        "consumption_of_gold",
      ];
      this.$excel(data.list, head, fiald, `业务数据`);
    },
  },
  watch: {
    type: {
      handler(newName, oldName) {
        if (this.type == 4 || this.type == 5) {
          this.dayType = "3";
        }
      },
      immediate: true,
    },
    dayType: {
      handler(newName, oldName) {
        if (newName == 1) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          this.timeArr = [time, time];
          this.startDate = time;
          this.endDate = time;
        } else if (newName == 2) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          var newtimems = new Date().getTime() - 24 * 60 * 60 * 1000;
          var myDate1 = new Date(newtimems);
          var time1 = myDate1.toLocaleDateString().split("/").join("-");
          this.timeArr = [time1, time];
          this.startDate = time1;
          this.endDate = time;
        } else if (newName == 3) {
          var myDate = new Date();
          var time = myDate.toLocaleDateString().split("/").join("-");
          var newtimems = new Date().getTime() - 24 * 60 * 60 * 1000 * 6;
          var myDate1 = new Date(newtimems);
          var time1 = myDate1.toLocaleDateString().split("/").join("-");
          this.timeArr = [time1, time];
          this.startDate = time1;
          this.endDate = time;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.DataScreening {
  padding: 20px;
  .searchBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    h3 {
      margin: 0;
      display: flex;
      align-items: center;
      .tt {
        display: inline-block;
        width: 5px;
        height: 18px;
        margin-right: 5px;
        background-color: #7b94d8;
      }
    }
    .right {
      display: flex;
      align-items: center;
    }
  }
  .card {
    height: 150px;
    border: 2px solid #ebeff8;
    border-radius: 5px;
    h3 {
      display: flex;
      align-items: center;
      padding-left: 10px;
      .point {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 5px solid #7b94d8;
        margin-right: 10px;
      }
    }
    h1 {
      margin: 0px 0;
      text-align: right;
      padding-right: 20px;
      i {
        color: #7b94d8;
      }
    }
    .line {
      margin-top: 10px;
      border-top: 2px solid #ebeff8;
    }
    .foot {
      padding: 10px 20px 0;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // .left{

      // }
    }
  }
}
.dataFirst {
  .title {
    display: flex;
    align-items: center;
    .block {
      width: 5px;
      height: 18px;
      background-color: #7b94d8;
    }
    .text {
      margin: 0 10px;
      font-size: 18px;
      font-weight: 700;
    }
  }
  .searchBox {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .displayPage {
      display: flex;
      .el-select {
        width: 160px;
        margin-right: 30px;
        // margin-bottom: 15px;
      }
      .p {
        border: 1px solid #dcdfe6;
        border-right: 0px;
        height: 32px;
        line-height: 15px;
        margin: 0px;
        background: #f5f7fa;
        color: #909399;
        font-size: 14px;
        padding: 10px;
        border-radius: 4px 0px 0px 4px;
      }
    }
  }
}
</style>